<template>
	<div>
		<div style="display: inline-block;">
			<div style="position: relative;display: inline-block;margin:5px;">
				<span>状态：</span>
				<el-select v-model="statusT" style="width:150px;margin-left: 10px;" @change="select()">
					<el-option v-for="item in statesnum1" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>&nbsp;&nbsp;
			</div>
			<div style="position: relative;display: inline-block;margin:5px;">
				<span>出发地省市区:</span>
				<el-cascader style="width:200px" size="large" :options="options" filterable ref="cascaderAddrT1" @change="select1()"
					v-model="storeAddresscT" :placeholder="storeAddrecT"  :value="storeAddrecT">
				</el-cascader>
			</div>
			<div style="position: relative;display: inline-block;margin:5px;">
				<span>出发地详细地址:</span>
				<el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入出发地详细地址" @change="select()"
					v-model="shipAddressT">
				</el-input>&nbsp;&nbsp;
			</div>
			<div style="position: relative;display: inline-block;margin:5px;">
				<span>目的地省市区:</span>
				<el-cascader style="width:200px" size="large" :options="options" filterable ref="cascaderAddrT2" @change="select2()"
					v-model="storeAddresscT2" :placeholder="storeAddrecT2"  :value="storeAddrecT2">
				</el-cascader>
			</div>
			<div style="position: relative;display: inline-block;margin:5px;">
				<span>目的地详细地址:</span>
				<el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入目的地详细地址" @change="select()"
					v-model="deliveryAddressT">
				</el-input>&nbsp;&nbsp;
			</div>
			<el-button style="margin:10px;" size="mini" type="primary" icon="document" @click="select">查询
			</el-button>
			<el-button style="margin:10px;" size="mini" type="primary" icon="document" @click="cleans">重置
			</el-button>&nbsp;&nbsp;
			<el-button style='margin-left:15px;' size="mini" type="primary" :disabled="!isAuth('DriverItinerary:add')"
				icon="document" @click="addBtn()">添加
			</el-button>
		</div>
		<el-table v-loading="tableDataLoading" :data="homeData.list">
			<el-table-column fixed prop="fixedStrokeId" label="编号" width="80">
			</el-table-column>
			<el-table-column prop="shipCity" label="出发地址">
				<template slot-scope="scope">
					<div>
						{{scope.row.shipProvince}}{{scope.row.shipCity}}{{scope.row.shipDistrict}}{{scope.row.shipAddress}}
					</div>
					<div>目的经纬度：{{scope.row.shipAddressLatitude}} / {{scope.row.shipAddressLongitude}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="deliveryCity" label="目的地址">
				<template slot-scope="scope">
					<div>
						{{scope.row.deliveryProvince}}{{scope.row.deliveryCity}}{{scope.row.deliveryDistrict}}{{scope.row.deliveryAddress}}
					</div>
					<div>目的经纬度：{{scope.row.deliveryAddressLatitude}} / {{scope.row.deliveryAddressLongitude}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="payMoney" label="一口价金额" width="160">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="160">
			</el-table-column>
			<el-table-column prop="status" label="状态" fixed="right" width="80">
				<template slot-scope="scope">
					<div v-if="scope.row.status==1" style="color: #13ce66;">开启</div>
					<div v-else-if="scope.row.status==2" style="color: #ff4949;">关闭</div>
					<div v-else>-</div>
					<el-switch v-model="scope.row.status" @change="change2(scope.row)"
						:active-value="openValue" :inactive-value="closeValue" active-color="#13ce66"
						inactive-color="#ff4949">
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="120" fixed='right'>
				<template slot-scope="scope">
					<el-button style='margin:5px;' size="mini" :disabled="!isAuth('DriverItinerary:update')"
						type="primary" icon="document" @click="addBtn(scope.row)">修改
					</el-button>
					<el-button size="mini" type="warning" :disabled="!isAuth('DriverItinerary:delete')"
						@click="wanchengOr(scope.row)" style="margin: 5px;">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="text-align: center;margin-top: 10px;float:right">
			<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
				:page-sizes="[10, 20, 30, 40]" :page-size="size" :current-page="page"
				layout="total,sizes, prev, pager, next,jumper" :total="homeData.totalCount">
			</el-pagination>
		</div>
		
		<!-- 添加/修改 弹框 -->
		<el-dialog :title="titles" :visible.sync="dialogFormVisibleJsAdd" center width="80%">
			
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">一口价金额：</span>
				<el-input style="width:50%;" v-model="payMoney" type="number" :min="0" placeholder="请输入一口价金额">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">状态：</span>
				<el-radio-group v-model="status">
					<el-radio :label="1">开启</el-radio>
					<el-radio :label="2">关闭</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">出发地址：</span>
				<el-button type="primary" @click="huoqudizhi(1)" plain>获取出发地址</el-button>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">出发省市区：</span>
				<el-cascader style="width:50%" size="large" :options="options" ref="cascaderAddr"
					v-model="storeAddressc" :placeholder="storeAddrec" disabled :value="storeAddrec">
				</el-cascader>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">出发详细地址：</span>
				<el-input style="width:50%;" v-model="shipAddress" type="text" disabled placeholder="请输入出发详细地址">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">出发地址经度：</span>
				<el-input style="width:50%;" v-model="shipAddressLongitude" disabled type="text"
					placeholder="请选择出发地址经度">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">出发地址纬度：</span>
				<el-input style="width:50%;" v-model="shipAddressLatitude" disabled type="text" placeholder="请选择出发地址纬度">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">目的地地址：</span>
				<el-button type="primary" @click="huoqudizhi(2)" plain>获取目的地地址</el-button>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">目的地省市区：</span>
				<el-cascader style="width:50%" size="large" :options="options" disabled ref="cascaderAddr2"
					v-model="storeAddressm" :placeholder="storeAddrem" :value="storeAddrem">
				</el-cascader> <!-- @change="handleChange55" -->
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">目的地详细地址：</span>
				<el-input style="width:50%;" v-model="deliveryAddress" type="text" disabled placeholder="请输入目的地详细地址">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">目的地经度：</span>
				<el-input style="width:50%;" v-model="deliveryAddressLongitude" disabled type="text"
					placeholder="请选择目的地经度">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">目的地纬度：</span>
				<el-input style="width:50%;" v-model="deliveryAddressLatitude" disabled type="text"
					placeholder="请选择目的地纬度">
				</el-input>
			</div>


			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleJsAdd = false">取 消</el-button>
				<el-button type="primary" @click="changeShAdd()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 地图 -->
		<el-dialog title="地图定位" :visible.sync="dialogFormVisibleDt" center width="70%">
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">省市区：</span>
				<el-cascader style="width:50%" size="large" :options="options" ref="cascaderAddr3" filterable
					v-model="storeAddress" :placeholder="storeAddre" @change="handleChange6" :value="storeAddre">
				</el-cascader>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">详细地址：</span>
				<el-input style="width:50%;" v-model="address" type="text" @keydown.enter.native="selectDt"
					placeholder="请输入目的地详细地址">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">经度：</span>
				<el-input style="width:50%;" v-model="longitude" type="text" placeholder="请选择经度">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">纬度：</span>
				<el-input style="width:50%;" v-model="latitude" type="text" placeholder="请选择纬度">
				</el-input>
			</div>
			<div>
				<div id="container1" style="width:80%;height:500px;margin-left: 10%;"></div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleDt = false">取 消</el-button>
				<el-button type="primary" @click="changeDt()">确定选择</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		quillEditor
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import quillConfig from '../locality/quill-config.js'
	import axios from 'axios';
	import {
		jsonp
	} from 'vue-jsonp'
	import {
		provinceAndCityData,
		regionData,
		provinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from 'element-china-area-data'
	var cityOptions = []
	var geocoder, map, markersArray, infoWindow = [];
	export default {
		components: {
			quillEditor,
		},
		data() {
			return {
				openValue: '1',
				closeValue: '2',
				page: 1,
				limit: 10,
				title: '',
				tableDataLoading: true,
				homeData: [],
				options: regionData,
				storeAddress: [],
				storeAddressm: [],
				storeAddressc: [],
				storeAddre: '请选择城市',
				storeAddrem: '请选择城市',
				storeAddrec: '请选择城市',
				province: '', //省
				city: '', //市
				district: '', //区
				statesnum1: [{
						value: '',
						label: '全部'
					},

					{
						value: 1,
						label: '开启'
					}, {
						value: 2,
						label: '关闭'
					},
				],
				// x新的
				statusT: '', //状态
				storeAddrecT: '请选择城市',
				storeAddresscT: [],
				storeAddrecT2: '请选择城市',
				storeAddresscT2: [],
				shipProvinceT: "", //筛选出发省
				shipCityT: "", //筛选出发市
				shipDistrictT: "", //筛选出发区
				shipAddressT: "", //筛选出发地址
				deliveryProvinceT: "", //筛选目的省
				deliveryCityT: "", //筛选目的市
				deliveryDistrictT: "", //筛选目的区
				deliveryAddressT: "", //筛选目的地址
				titles: '',
				address: '', //地址
				latitude: '', //纬度
				longitude: '', //经度
				wupin: [], //物品分类
				dialogFormVisibleDt: false,
				map: '',
				dialogFormVisibleJsAdd: false,
				// -----
				driverRouteId: 1, //id
				shipProvince: "", //出发省
				shipCity: "", //出发市
				shipDistrict: "", //出发区
				shipAddress: "", //出发地址
				shipAddressLongitude: "", //出发地址经度
				shipAddressLatitude: "", //出发地址维度
				deliveryProvince: "", //目的省
				deliveryCity: "", //目的市
				deliveryDistrict: "", //目的区
				deliveryAddress: "", //目的地址
				deliveryAddressLongitude: "", //目的地址经度
				deliveryAddressLatitude: "", //目的地址维度
				status: 1, //状态 1正常 2关闭
				dituTypes: 1,
				payMoney:'',
			}
		},
		methods: {
			
			handleSizeChange2(val) {
				this.limit = val
				this.homeSelect()
			},
			handleCurrentChange2(val) {
				this.page = val
				this.homeSelect()
			},
			// 获取数据列表
			homeSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('fixedStroke/selectFixedStrokeList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'shipProvince': this.shipProvinceT,
						'shipCity': this.shipCityT,
						'shipDistrict': this.shipDistrictT,
						'shipAddress': this.shipAddressT,
						'deliveryProvince': this.deliveryProvinceT,
						'deliveryCity': this.deliveryCityT,
						'deliveryDistrict': this.deliveryDistrictT,
						'deliveryAddress': this.deliveryAddressT,
						'status':this.statusT,
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data
					this.homeData = data.data
				})
			},
			// 详情跳转
			updatesvideo(userId) {
				if (userId) {
					this.$router.push({
						path: '/userDetail',
						query: {
							userId: userId
						}
					})
				}

			},
			// 查询
			select() {
				this.page = 1
				this.limit = 10
				this.homeSelect()
			},
			// 重置
			cleans() {
				this.page = 1
				this.statusT = ''
				this.shipProvinceT = ''
				this.shipCityT = ''
				this.shipDistrictT = ''
				this.shipAddressT = ''
				this.deliveryProvinceT = ''
				this.deliveryCityT = ''
				this.deliveryDistrictT = ''
				this.deliveryAddressT = ''
				this.storeAddrecT = '请选择城市'
				this.storeAddresscT = []
				this.storeAddrecT2 = '请选择城市'
				this.storeAddresscT2 = []
				this.homeSelect()
			},
			// 获取省市区
			select1(value) {
				value = this.$refs['cascaderAddrT1'].currentLabels
				this.shipProvinceT = value[0]
				this.shipCityT = value[1]
				this.shipDistrictT = value[2]
				if (this.shipCityT == '市辖区') {
					this.shipCityT = this.shipProvinceT
				}
				console.log(this.$refs['cascaderAddrT1'].currentLabels)
				this.page = 1
				this.homeSelect()
				
				
				
			},
			// 获取省市区
			select2(value) {
				value = this.$refs['cascaderAddrT2'].currentLabels
				this.deliveryProvinceT = value[0]
				this.deliveryCityT = value[1]
				this.deliveryDistrictT = value[2]
				if (this.deliveryCityT == '市辖区') {
					this.deliveryCityT = this.deliveryProvinceT
				}
				console.log(this.$refs['cascaderAddrT2'].currentLabels)
				this.page = 1
				this.homeSelect()
			},
			// 获取物品类型获取物品类型
			xianshi() {
				this.$http({
					url: this.$http.adornUrl('common/type/334'),
					method: 'get',
					data: this.$http.adornData({})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						//this.wupin = data.data.value.split(',')
						this.wupin = data.data
					}
				})
			},
			// 线路规划弹框
			dituguihua(row) {
				var item = JSON.stringify(row)
				this.$router.push({
					path: '/dituguihua',
					query: {
						item: item
					}
				})

			},
			initMap() {
				var center = new TMap.LatLng(39.984104, 116.307503);
				//初始化地图
				var map = new TMap.Map("container", {
					rotation: 20, //设置地图旋转角度
					pitch: 30, //设置俯仰角度（0~45）
					zoom: 12, //设置地图缩放级别
					center: center //设置地图中心点坐标
				});
			},
			displayPolyline(pl) {
				// 创建 MultiPolyline显示路径折线
				var polylineLayer = new TMap.MultiPolyline({
					id: 'polyline-layer',
					map: map,
					styles: {
						style_blue: new TMap.PolylineStyle({
							color: '#3777FF',
							width: 8,
							borderWidth: 5,
							borderColor: '#FFF',
							lineCap: 'round',
						}),
					},
					geometries: [{
						id: 'pl_1',
						styleId: 'style_blue',
						paths: pl,
					}, ],
				});
			},
			
			// 删除
			wanchengOr(row) {
				this.$confirm(`确定删除信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: ''
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('fixedStroke/deleteFixedStroke'),
						method: 'post',
						params: this.$http.adornParams({
							'fixedStrokeId': row.fixedStrokeId,
						})
					}).then(({
						data
					}) => {
						if (data.code == 0) {
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.homeSelect()
								}
							})
						} else {
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
								onClose: () => {}
							})
						}
					})

				}).catch(() => {})


			},
			// 添加/修改 弹框
			addBtn(row) {
				if (row) {
					this.titles = '修改'
					this.driverRouteId = row.fixedStrokeId
					this.shipProvince = row.shipProvince
					this.shipCity = row.shipCity
					this.shipDistrict = row.shipDistrict
					this.shipAddress = row.shipAddress
					this.shipAddressLongitude = row.shipAddressLongitude
					this.shipAddressLatitude = row.shipAddressLatitude
					this.deliveryProvince = row.deliveryProvince
					this.deliveryCity = row.deliveryCity
					this.deliveryDistrict = row.deliveryDistrict
					this.deliveryAddress = row.deliveryAddress
					this.deliveryAddressLongitude = row.deliveryAddressLongitude
					this.deliveryAddressLatitude = row.deliveryAddressLatitude
					this.status = Number(row.status) 
					this.payMoney = row.payMoney
					
					this.storeAddrec = this.shipProvince + '/' + this.shipCity + '/' + this.shipDistrict
					this.storeAddrem = this.deliveryProvince + '/' + this.deliveryCity + '/' + this.deliveryDistrict
				} else {
					this.titles = '添加'
					this.driverRouteId = ''
					
					this.shipProvince = ''
					this.shipCity = ''
					this.shipDistrict = ''
					this.shipAddress = ''
					this.shipAddressLongitude = ''
					this.shipAddressLatitude = ''
					this.deliveryProvince = ''
					this.deliveryCity = ''
					this.deliveryDistrict = ''
					this.deliveryAddress = ''
					this.deliveryAddressLongitude = ''
					this.deliveryAddressLatitude = ''
					this.status = 1
					this.payMoney = ''
					this.storeAddrec = '请选择城市'
					this.storeAddrem = '请选择城市'
				}
				this.dialogFormVisibleJsAdd = true
			},
			// 打开地图弹框
			huoqudizhi(index) {
				this.dituTypes = index
				if (index == 1) {

					this.province = this.shipProvince
					this.city = this.shipCity
					this.district = this.shipDistrict
					this.address = this.shipAddress
					this.longitude = this.shipAddressLongitude
					this.latitude = this.shipAddressLatitude
					this.storeAddre = '请选择城市'
					this.storeAddress = [this.shipProvince, this.shipCity, this.shipDistrict]

				} else {

					this.province = this.deliveryProvince
					this.city = this.deliveryCity
					this.district = this.deliveryDistrict
					this.address = this.deliveryAddress
					this.longitude = this.deliveryAddressLongitude
					this.latitude = this.deliveryAddressLatitude
					this.storeAddre = '请选择城市'
					this.storeAddress = [this.deliveryProvince, this.deliveryCity, this.deliveryDistrict]
				}
				this.getMyLocation()
				this.dialogFormVisibleDt = true
			},
			changeDt() {
				if (this.dituTypes == 1) {
					this.shipProvince = this.province
					this.shipCity = this.city
					this.shipDistrict = this.district
					this.shipAddress = this.address
					this.shipAddressLongitude = this.longitude
					this.shipAddressLatitude = this.latitude
					this.storeAddrec = this.shipProvince + '/' + this.shipCity + '/' + this.shipDistrict
					this.storeAddressc = []

				} else {
					this.deliveryProvince = this.province
					this.deliveryCity = this.city
					this.deliveryDistrict = this.district
					this.deliveryAddress = this.address
					this.deliveryAddressLongitude = this.longitude
					this.deliveryAddressLatitude = this.latitude
					this.storeAddrem = this.deliveryProvince + '/' + this.deliveryCity + '/' + this.deliveryDistrict
					this.storeAddressm = []
				}
				this.dialogFormVisibleDt = false
			},
			// 确认添加
			changeShAdd() {
				if (this.payMoney === '' || this.payMoney == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '一口价金额不能为空',
						type: 'warning'
					});
					return
				}
				if (this.shipCity === '' || this.shipCity == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '出发地省市区不能为空',
						type: 'warning'
					});
					return
				}
				if (this.shipAddress === '' || this.shipAddress == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '出发地址不能为空',
						type: 'warning'
					});
					return
				}
				if (this.shipAddressLongitude === '' || this.shipAddressLatitude == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '出发地经纬度不能为空',
						type: 'warning'
					});
					return
				}
				if (this.deliveryCity === '' || this.deliveryCity == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '目的地省市区不能为空',
						type: 'warning'
					});
					return
				}
				if (this.deliveryAddress === '' || this.deliveryAddress == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '目的地地址不能为空',
						type: 'warning'
					});
					return
				}
				if (this.deliveryAddressLongitude === '' || this.deliveryAddressLatitude == null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '目的地经纬度不能为空',
						type: 'warning'
					});
					return
				}

				if (this.titles == '添加') {
					var url = 'fixedStroke/insertFixedStroke'
				} else {
					var url = 'fixedStroke/updateFixedStroke'
				}
				this.$http({
					url: this.$http.adornUrl(url),
					method: 'post',
					// params: this.$http.adornParams({
					data: this.$http.adornData({
						'fixedStrokeId': this.driverRouteId,
						'shipProvince': this.shipProvince,
						'shipCity': this.shipCity,
						'shipDistrict': this.shipDistrict,
						'shipAddress': this.shipAddress,
						'shipAddressLongitude': this.shipAddressLongitude,
						'shipAddressLatitude': this.shipAddressLatitude,
						'deliveryProvince': this.deliveryProvince,
						'deliveryCity': this.deliveryCity,
						'deliveryDistrict': this.deliveryDistrict,
						'deliveryAddress': this.deliveryAddress,
						'deliveryAddressLongitude': this.deliveryAddressLongitude,
						'deliveryAddressLatitude': this.deliveryAddressLatitude,
						'status': this.status,
						'payMoney':this.payMoney,

					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.dialogFormVisibleJsAdd = false
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.homeSelect()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'warning',
							duration: 1500,
							onClose: () => {}
						})
					}

				})
			},
			// 获取省市区
			handleChange5(value) {
				value = this.$refs['cascaderAddr'].currentLabels
				this.shipProvince = value[0]
				this.shipCity = value[1]
				this.shipDistrict = value[2]
				if (this.shipCity == '市辖区') {
					this.shipCity = this.shipProvince
				}
				console.log(this.$refs['cascaderAddr'].currentLabels)
			},
			// 获取省市区
			handleChange55(value) {
				value = this.$refs['cascaderAddr2'].currentLabels
				this.deliveryProvince = value[0]
				this.deliveryCity = value[1]
				this.deliveryDistrict = value[2]

				if (this.deliveryCity == '市辖区') {
					this.deliveryCity = this.deliveryProvince
				}

				console.log(this.$refs['cascaderAddr2'].currentLabels)
			},
			// 获取省市区
			handleChange6(value) {
				value = this.$refs['cascaderAddr3'].currentLabels
				this.province = value[0]
				this.city = value[1]
				this.district = value[2]
				if (this.city == '市辖区') {
					this.city = this.province
				}
				console.log(this.$refs['cascaderAddr3'].currentLabels)
			},
			//定位获得当前位置信息
			getMyLocation() {
				var geolocation = new qq.maps.Geolocation("SZWBZ-QDWC3-M233R-YDXW5-TZT7Q-S4FJ7", "代驾管理管理");
				geolocation.getIpLocation(this.showPosition, this.showErr);
				// geolocation.getLocation(this.showPosition, this.showErr);//或者用getLocation精确度比较高
			},
			showPosition(position) {
				console.log(position);
				// this.latitude = position.lat;
				// this.longitude = position.lng;
				// this.city = position.city;
				this.setMap();
			},
			showErr(e) {
				console.log("定位失败", e);
				this.getMyLocation(); //定位失败再请求定位，测试使用
			},
			//位置信息在地图上展示
			setMap() {
				//步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
				//设置地图中心点
				var myLatlng = new qq.maps.LatLng(this.latitude, this.longitude);
				//定义工厂模式函数
				var myOptions = {
					zoom: 13, //设置地图缩放级别
					center: myLatlng, //设置中心点样式
					mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
				}
				// //获取dom元素添加地图信息
				var map = new qq.maps.Map(document.getElementById("container1"), myOptions);
				//给地图添加点击事件

				//给定位的位置添加图片标注
				var marker = new qq.maps.Marker({
					position: myLatlng,
					map: map
				});
				// `````````````
				var that = this;
				if (that.longitude == '') {
					var center = new qq.maps.LatLng(34.34281541842994, 108.93970884382725);
				} else {
					var center = new qq.maps.LatLng(that.latitude, that.longitude);
				}

				var map = new qq.maps.Map(document.getElementById("container1"), {
					center: center,
					zoom: 13
				});
				var marker = new qq.maps.Marker({
					position: center,
					map: map
				});
				var latlngBounds = new qq.maps.LatLngBounds();
				qq.maps.event.addListener(map, "click", function(event) {
					console.log(event, qq.maps);
					that.longitude = event.latLng.getLng(); // 经度
					that.latitude = event.latLng.getLat(); // 纬度
					jsonp('https://apis.map.qq.com/ws/geocoder/v1/?location=' + event.latLng.getLat() + ',' + event
						.latLng.getLng() + '&key=SZWBZ-QDWC3-M233R-YDXW5-TZT7Q-S4FJ7&get_poi=1&output=jsonp', {
							myCustomUrlParam: 'veryNice'
						}).then(response => {
						console.log('response', response)
						that.address = response.result.formatted_addresses.recommend

					}).catch(error => {
						// handle error
					}).then(() => {
						// always executed
					});
					if (markersArray) {
						for (let i in markersArray) {
							markersArray[i].setMap(null);
						}
					}
					if (!marker) {
						marker = new qq.maps.Marker({
							map: map,
							position: event.latLng
						});
					} else {
						marker.setPosition(event.latLng)
					}

					// var marker = new qq.maps.Marker({
					// 	map: map,
					// 	position: event.latLng
					// });
					// markersArray.push(marker);

				});
				geocoder = new qq.maps.Geocoder({
					complete: function(result) {
						console.log(result);
						that.longitude = result.detail.location.lng;
						that.latitude = result.detail.location.lat;
						map.setCenter(result.detail.location);
						var marker = new qq.maps.Marker({
							map: map,
							position: result.detail.location
						});
						markersArray.push(marker);
					}
				});
			},
			// 地图定位
			selectDt() {
				console.log(this.address, this.address.replace(/^\s+|\s+$/gm, ''))

				if (this.address == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入详细地址',
						type: 'warning'
					});
					return
				} else {
					var add = this.province + this.city + this.district + this.address
					let that = this
					jsonp('https://apis.map.qq.com/ws/geocoder/v1/?address==' + add +
						'&key=SZWBZ-QDWC3-M233R-YDXW5-TZT7Q-S4FJ7&get_poi=1&output=jsonp', {
							myCustomUrlParam: 'veryNice'
						}).then(response => {
						// handle success
						if (response.message == '查询无结果') {
							this.$notify({
								title: '提示',
								duration: 1800,
								message: '详细地址输入有误，请重新输入',
								type: 'warning'
							});
							return
						}
						console.log('response', response)
						that.longitude = response.result.location.lng; // 经度
						that.latitude = response.result.location.lat; // 纬度
						// that.address = response.result.address_components.province + response.result.address_components
						// 	.city + response.result.address_components.district + response.result.title
						that.setMap()
					}).catch(error => {
						// handle error
					}).then(() => {
						// always executed
					});
				}

			},
			
			// 开启关闭
			change2(row) {
				this.$http({
					url: this.$http.adornUrl('fixedStroke/updateFixedStroke'),
					method: 'post',
					// params: this.$http.adornParams({
					data: this.$http.adornData({
						'fixedStrokeId': row.fixedStrokeId,
						'shipProvince': row.shipProvince,
						'shipCity': row.shipCity,
						'shipDistrict': row.shipDistrict,
						'shipAddress': row.shipAddress,
						'shipAddressLongitude': row.shipAddressLongitude,
						'shipAddressLatitude': row.shipAddressLatitude,
						'deliveryProvince': row.deliveryProvince,
						'deliveryCity': row.deliveryCity,
						'deliveryDistrict': row.deliveryDistrict,
						'deliveryAddress': row.deliveryAddress,
						'deliveryAddressLongitude': row.deliveryAddressLongitude,
						'deliveryAddressLatitude': row.deliveryAddressLatitude,
						'status': row.status,
						'payMoney':row.payMoney,
					
					})
				}).then(({
					data
				}) => {
					if(data.code==0){
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.homeSelect()
							}
						})
					}else{
						this.$message({
							message: data.msg,
							type: 'warning',
							duration: 1500,
							onClose: () => {
								this.homeSelect()
							}
						})
					}
					
				})
			},
		},
		mounted() {
			this.parentId = ''
			this.homeSelect()
			// this.xianshi()
		}
	}
</script>

<style>
	.customWidth {
		width: 80% !important;
	}

	.adver_main.box {
		display: block;
		max-width: 100%;
		text-align: center;
		border: 1px dotted rgba(67, 79, 103, .4);
	}

	.cards {
		padding: 0 8px;
		margin-bottom: 15px;
	}

	.adver_main.box a {
		display: flex;
		justify-content: center;
		height: 150px;
		line-height: 150px;
		text-decoration: none
	}

	.bannerManin {
		border: 1px solid #e8e8e8;
		font-size: 14px;
		padding: 0 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 113px;
		color: rgba(0, 0, 0, .65);
	}

	.bannerManin span {
		display: inline-block;
		margin-left: 5px;
	}

	.bannerManin img {
		width: 48px;
		height: 48px;
		border-radius: 50%;
	}

	.bannerbtn {
		display: flex;
		border-top: none !important;
		border: 1px solid #e8e8e8;
		padding: 11px;
		font-size: 14px;
		color: #3E8EF7;
	}

	.bannerbtn a {
		flex: 1;
		text-align: center;
		color: #3E8EF7 !important;
		text-decoration: none;
	}

	.imgs {
		position: relative;
		border-radius: 6px;
		width: 148px;
		height: 148px;
		margin-right: 10px;
		display: inline-block;
	}

	.dels {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}

	.dels .el-icon-delete {
		line-height: 148px;
		padding-left: 58px;
		font-size: 25px;
		color: #fff;
	}

	.imgs:hover .dels {
		width: 100%;
		height: 100%;
		background: #000;
		display: block;
		opacity: 0.5;
	}

	.bqList {
		padding: 4px 14px;
		margin: 4px;
		border: 1px solid #efefef;
		font-size: 12px;
		color: #999;
		border-radius: 4px;
		margin-right: 15px;
	}

	.delss {
		display: none;
		position: relative;
	}

	.delss .el-icon-delete {
		position: absolute;
		top: 0;
	}

	.bqList:hover .delss {
		display: initial;
		opacity: 0.5;

	}

	.tj {
		padding: 6px !important;
		margin: 4px;
		font-size: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
</style>